<!--
* @description  参数1
* @fileName  cookSale
* @author userName  
* @date 2021-04-09 22:08:57
* @version V1.0.0
!-->
<template>
    <div id="cookSale" class="cookSale">
        <div style="text-align:center;font-size:30px">订单详情</div>
        <!-- <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> -->

        <el-link
            v-if="loginrname == 'admin'"
            class="error-btn"
            type="primary"
            style="position:relative; float: right; right:100px;top:200px;font-size:20px"
            @click="goBack"
            >返回管理页</el-link
        >

        <!-- 查看桌子使用情况 -->
        <div style="text-align:center;">
        <el-button type="text" style="font-size:20px" @click="dialogVisible = true">查看桌子使用</el-button>
        </div>


        <el-dialog title="桌子信息" :visible.sync="dialogVisible" width="30%">
            <span v-for="user in userList" :key="user.uid">
                <!-- {{user.online}} -->
                <div v-if="user.online == 0" style="color:#409EFF">{{ user.tname }}</div>

                <div v-if="user.online == 1" style="color:#F56C6C">{{ user.tname }}</div>
            </span>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 折叠面板 -->
        <div class="container" element-loading-background="rgba(0, 0, 0, 1)" style="width:600px;margin:0 auto">
            <span>
                <el-collapse>
                    <div v-for="sale in salelist" :key="sale.index">
                        <el-collapse-item :title="sale.datetime" v-if="sale.fname">
                            <div v-if="loginrname == 'waiter'" style="float:right">
                                <el-button type="text">{{ sale.tname }}</el-button>
                                <el-button type="primary" v-if="sale.moneyStatus !== 1" @click="saleMoney(sale.datetime)">结算</el-button>
                                <el-button type="text" v-if="sale.moneyStatus == 1" disabled style="color:#F56C6C">已结算</el-button>
                            </div>
                            <div v-if="loginrname == 'cook'" style="float:right">
                                <el-button type="primary" v-if="sale.status == 1" @click="saleAcction(sale.datetime)">开始</el-button>
                                <el-button type="success" v-if="sale.status == 2" @click="saleOver(sale.datetime)">完成</el-button>
                                <el-button type="text" v-if="sale.status == 3" disabled style="color:#F56C6C">已完成</el-button>
                            </div>
                            <div v-if="loginrname == 'admin'" style="float:right">
                                <el-button type="primary" v-if="sale.moneyStatus !== 1" @click="saledelete(sale.datetime)">删除</el-button>
                            </div>

                            <div v-for="sss in sale.saleList" :key="sss.sid" style="display:inline">
                                <div>
                                    <span v-if="loginrname == 'waiter'">{{ sss.fprice * sss.num }}------- </span>{{ sss.fname }}*{{
                                        sss.num
                                    }}
                                </div>
                            </div>
                            <div v-if="loginrname == 'waiter'" style="color:red;font-size:25px">总计：{{ sale.fprice }}¥</div>
                        </el-collapse-item>
                    </div>
                </el-collapse>
            </span>
        </div>
    </div>
</template>

<script>
import { selectsale, updatesale } from '../../api/sale';
import { selectClient } from '../../api/user';
export default {
    props: {
        // 父辈向子辈传参
    },
    name: 'cookSale',
    data() {
        return {
            salelist: [],
            loginrname: '',
            datetimes: '',
            timer: null, // 定时器名称
            dialogVisible: false,
            userList: []
        };
    },
    beforeDestroy() {
        // console.log('销毁定时器');
        clearInterval(this.timer);
        this.timer = null;
    },
    created() {
        // 实例被创建之后执行代码
        this.findClient();
        this.seSale();
        this.setTime(20000);
        this.loginrname = localStorage.getItem('loginrname');
        // console.log(this.loginrname);
        // console.log('loginrname');
    },
    computed: {
        // 计算属性
    },
    components: {
        // 组件的引用
    },
    methods: {
        // 方法
        goBack() {
            this.$router.go(-1);
        },
        findClient() {
            selectClient()
                .then(res => {
                    console.log('selectclient');
                    console.log(res.data.Selectclient[0].online);
                    console.log(res.data);
                    this.userList = res.data.Selectclient;
                })
                .catch(res => {});
        },
        saleMoney(time) {
            var ttt = time;
            // console.log(ttt);
            var that = this;
            var ddd = JSON.stringify({
                // 参数
                datetime: ttt,
                moneyStatus: 1
            });
            this.updateSalee(ddd);
        },
        setTime(time) {
            var that = this;
            const timer = setInterval(() => {
                that.seSale();
                // console.log('定时器次数');
            }, time);

            this.$once('hook:beforeDestroy', () => {
                clearInterval(timer);
            });
        },
        seSale() {
            selectsale()
                .then(res => {
                    // console.log('seSale');
                    // console.log(res);
                    var aaa = res.data;
                    for (var i = 0; i < aaa.length; i++) {
                        // console.log(aaa[i].status);
                        // console.log("status");
                        if (aaa[i].status > 1) {
                        } else {
                            aaa[i].status = 1;
                        }

                        var fprice = 0;
                        for (var j = 0; j < aaa[i].saleList.length; j++) {
                            var xfprice = aaa[i].saleList[j].fprice * aaa[i].saleList[j].num;
                            // console.log(fprice);
                            // console.log(xfprice)
                            fprice += xfprice;
                        }
                        aaa[i].fprice = fprice;
                    }
                    this.salelist = aaa;
                    // console.log('salelist');
                    // console.log(this.salelist);
                })
                .catch(res => {});
        },
        saleAcction(time) {
            var ttt = time;
            // console.log(ttt);
            var that = this;
            for (var i = 0; i < that.salelist.length; i++) {
                if (that.salelist[i].datetime == ttt) {
                    // console.log(that.salelist[i].datetime + '    data');
                    that.salelist[i].status = 2;
                    var ddd = JSON.stringify({
                        // 参数
                        datetime: that.salelist[i].datetime,
                        status: 2
                    });
                    this.updateSalee(ddd);
                }
            }
        },
        saledelete(time) {
            var ttt = time;
            // console.log(ttt);
            var that = this;
            for (var i = 0; i < that.salelist.length; i++) {
                if (that.salelist[i].datetime == ttt) {
                    console.log(that.salelist[i].datetime + '    data');
                    that.salelist[i].status = 3;
                    var ddd = JSON.stringify({
                        // 参数
                        datetime: that.salelist[i].datetime,
                        status: 0
                    });
                    this.updateSalee(ddd);
                }
            }
        },
        saleOver(time) {
            var ttt = time;
            // console.log(ttt);
            var that = this;
            for (var i = 0; i < that.salelist.length; i++) {
                if (that.salelist[i].datetime == ttt) {
                    // console.log(that.salelist[i].datetime + '    data');
                    that.salelist[i].status = 3;
                    var ddd = JSON.stringify({
                        // 参数
                        datetime: that.salelist[i].datetime,
                        status: 3
                    });
                    this.updateSalee(ddd);
                }
            }
        },
        updateSalee(ddd) {
            updatesale(ddd).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    if (this.loginrname == 'admin') {
                        this.seSale();
                    }
                    // console.log('updatesale');
                } else if (res.code !== 200) {
                    that.$message.error('出错了哦');
                }
            });
        }
    },
    mounted() {
        // 页面进入时加载内容
    },
    watch: {
        // 监测变化
    }
};
</script>
<style scoped lang="less"></style>
